<template>
  <div>
    <el-card class="box-card">
      <!-- 搜索头 -->
      <p>
        <el-input v-model="userCode" placeholder="请输入工程师编号" style="width:160px;border-right: 0px;"></el-input>
        <el-input v-model="userName" placeholder="请输入工程师姓名" style="width:160px;border-right: 0px;"></el-input>
        <el-select v-model="contractStatus" placeholder="请选择状态">
          <el-option label="全部" value="">全部</el-option>
          <el-option label="待初审" value="1">待初审</el-option>
          <el-option label="初审通过" value="2">初审通过</el-option>
          <el-option label="待终审" value="3">待终审</el-option>
          <el-option label="使用中" value="4">使用中</el-option>
          <el-option label="停用中" value="5">停用中</el-option>
        </el-select>
        <el-button @click="listEngineer"  icon="el-icon-search"></el-button>
        <el-button type="primary" @click="openAddEngineerWindow">新增工程师</el-button>
      </p>
      <!-- 搜索头 -->
      <el-row :span="19" type="flex">
        <el-col>
          <el-table
              :data="listEngineerForm"
              style="width: 100%;height:650px">
            <el-table-column
                prop="userCode"
                label="编号"
                width="130">
            </el-table-column>
            <el-table-column
                label="姓名"
                width="80">
                <template slot-scope="scope">
                  <span style="color: blue;cursor: pointer" @click="openAbilityEngineerWindow(scope.row)">{{scope.row.userName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄"
                width="60">
            </el-table-column>
            <el-table-column
                prop="phoneNumber"
                label="电话"
                width="160">
            </el-table-column>
            <el-table-column
                prop="emailAddress"
                label="邮箱"
                width="160">
            </el-table-column>
            <el-table-column
                label="性别"
                width="70">
              <template slot-scope="scope">
                <span>{{scope.row.gender === '0'?"女":scope.row.gender === '1'?"男":" 未知"}}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="地址"
                width="160">
              <template slot-scope="scope">
                <span>{{scope.row.province}} {{scope.row.city}} {{scope.row.area}} </span>
              </template>
            </el-table-column>
            <el-table-column
                label="身份"
                width="100">
              <template slot-scope="scope">
                <span>{{scope.row.character === 1?" 服务商":scope.row.character === 2?" 厂商":scope.row.character === 3?" 工程师":" 未知人员"}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="注册时间"
                width="160">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="签约状态"
                width="160">
              <template slot-scope="scope">
                <span :class="scope.row.contractStatus === 2?'redSpan':''">{{scope.row.contractStatus === 1?" 使用中":scope.row.contractStatus === 2?" 停用中":" 未签约"}}</span>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
              <template slot-scope="scope">
                  <el-popconfirm
                      confirm-button-text='解约'
                      cancel-button-text='取消'
                      icon="el-icon-info"
                      @confirm=terminationEngineer(scope.row)
                      icon-color="blue"
                      title="确定将此工程师解约？">
                    <el-button slot="reference" size="small"><span>解约</span></el-button>
                  </el-popconfirm>
                <el-popconfirm
                    v-if="scope.row.contractStatus === 1"
                    confirm-button-text='停用'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    @confirm=OpenOrStopEngineer(scope.row)
                    icon-color="blue"
                    :title='StopTitle+scope.row.userName'>
                  <el-button slot="reference" size="small"><span>停用</span></el-button>
                </el-popconfirm>
                <el-popconfirm
                    v-if="scope.row.contractStatus === 2"
                    confirm-button-text='启用'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    @confirm=OpenOrStopEngineer(scope.row)
                    icon-color="blue"
                    :title='OpenTitle+scope.row.userName' >
                  <el-button slot="reference" size="small"><span>启用</span></el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页开始 -->
      <div class="block" style="margin-top: 20px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
      </div>
    </el-card>
    <!--签约-->
    <el-dialog
        title="新增签约工程师"
        :visible.sync="AddEngineerWindow"
        width="50%"
        :before-close="handleClose">
      <div id="WindowsHeight">
        <p style="margin-left: 10px;font-size: 10px">
          签约工程师:
          <el-select id="AddSelect" multiple v-model="engineerId">
            <el-option
                v-for="item in listEngineerArray"
                :label="item.userName"
                :value="item.id">
            </el-option>
          </el-select>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="AddEngineerWindow = false">取 消</el-button>
    <el-button type="primary" @click="contractEngineer">签 约</el-button>
  </span>
    </el-dialog>
    <!--签约-->
    <!--签约-->
    <el-dialog
        title="工程师能力范围"
        :visible.sync="abilityEngineerWindow"
        width="35%"
        :before-close="handleClose">
        <ul id="abilityEngineerUl" type="none">
          <li>状态:
            <span>
            {{this.oneEngineer.contractStatus === 1?" 使用中":this.oneEngineer.contractStatus === 2?" 停用中":" 未签约"}}
            </span>
          </li>
          <li>工程师属性:
            <span>
            {{this.oneEngineer.deleteFlag === 0?" 正常":" 停用"}}
            </span>
          </li>
          <li>注册时间:<span> {{this.oneEngineer.createTime}}</span></li>
          <li>省市县:<span>{{this.oneEngineer.province}} {{this.oneEngineer.city}} {{this.oneEngineer.area}}</span></li>
        </ul><br>

      <span slot="footer" class="dialog-footer">
    <el-button @click="abilityEngineerWindow = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--签约-->
  </div>
</template>

<script>
export default {
  data () {
    return{
      pageSize: 5,
      engineerId: '', // 签约form
      pageNum: 1,
      total: 0,
      OpenTitle:'确定启用工程师: ',
      StopTitle:'确定停用工程师: ',
      userCode: '',
      contractStatus: '',
      userName: '',
      currentPage: 0,
      AddEngineerWindow: false,
      abilityEngineerWindow: false,
      listEngineerForm: [], // 分页全查
      listEngineerArray: [], // 未签约全查
      oneEngineer: []
    }
  },
  mounted() {
    this.listEngineerNoPage()
    this.listEngineer()
  },
  methods:{
    OpenOrStopEngineer (data) {
      this.request.delete('/memberZjx/engineer/stopOrOpenEngineer',{
        params:{
          id:data.id,
          contractStatus: data.contractStatus
        }
      }).then(res => {
        if (res){
          this.listEngineer()
          this.myMessage('success','启动成功')
        }else{
          this.myMessage('info','网络异常')
        }
      })
    },
    openAbilityEngineerWindow(data){
      this.oneEngineer = data
      this.abilityEngineerWindow = true
    },
    contractEngineer() { // 签约工程师
      const id = this.engineerId.join(',')
      this.request.get('/memberZjx/engineer/contractEngineer',{
        params: {
          id:id
        }
      }).then(res => {
        if (res){
          this.listEngineer()
          this.AddEngineerWindow = false
          this.myMessage('success','签约成功');
        } else {
          this.myMessage('info','网络异常');
        }
      })
    },
    openAddEngineerWindow(){ // 打开签约工程师弹窗
      this.engineerId = ''
      this.listEngineerNoPage()
      this.AddEngineerWindow = true
    },
    listEngineerNoPage () { // 工程师全查无分页
      this.request.post('/memberZjx/engineer/listEngineerNoPage').then(res => {
        this.listEngineerArray = res.data
      })
    },
    terminationEngineer(data){ // 解约工程师
      this.request.get('/memberZjx/engineer/terminationEngineer?id='+data.id).then(res => {
        if (res) {
          this.myMessage('success','解约成功')
          this.listEngineer()
        }else{
          this.myMessage('info','网络异常 请重试')
        }
      })
    },
    listEngineer() { // 已签约工程师全查
      this.request.get('/memberZjx/engineer/listEngineer',{
        params:{
            userCode: this.userCode,
            userName: this.userName,
            contractStatus: this.contractStatus,
            pageSize: this.pageSize,
            pageNum: this.pageNum
        }
      }).then(res => {
        this.listEngineerForm = res.data.records
        this.total = res.data.total
      })
    },
    myMessage (type, message) { // 弹窗提示
      this.$message({
        message: message,
        type: type
      })
    },
    handleSizeChange (val) { // 页码
      this.pageSize = val
      this.listEngineer()
    },
    handleCurrentChange (val) { // 页数
      this.pageNum = val
      this.listEngineer()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style>
#abilityEngineerUl>li{
  float: left;
  font-size: 10px;
  margin-left: 60px;
}
.redSpan{
  color: red;
}
</style>
